<template>
  <h2 class="question__title" :class="{ required: required }" :style="{ '--order': `'${seq}'` }">{{ title }}</h2>
  <p class="question__info" v-show="description">{{ description }}</p>
</template>

<script>
export default {
  props: {
    title: String,
    description: String,
    required: Boolean,
    seq: Number,
  },
}
</script>

<style lang="scss">
.question__title {
  position: relative;
  text-align: start;
  font-size: 20px;
  font-weight: normal;

  &::before {
    content: var(--order);
    padding-right: 10px;
    font-weight: bold;
  }
  &.required::after {
    content: '*';
    color: #f00;
    font-size: 26px;
    font-weight: bold;
    position: absolute;
    top: 0px;
    left: -14px;
  }
}

.question__info {
  margin-top: 14px;
  font-size: 16px;
  color: #666666;
}
</style>
